
<template>
  <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center
    custom-class="RegularPop dataSource">
    <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
      <h1>基础信息</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="form.name" placeholder="配置名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="第三方类型" prop="type">
            <el-select v-model="form.type" placeholder="第三方登录类型" clearable>
              <el-option v-for="dict in third_login_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="appId" prop="clientId">
            <el-input v-model="form.clientId" placeholder="appId" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客戶端密钥" prop="clientSecret">
            <el-input v-model="form.clientSecret" placeholder="请输入客户端密钥" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号生成前缀" prop="accountPrefix">
            <el-input v-model="form.accountPrefix" placeholder="请输入账号生成前缀" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号生成位数" prop="accountLenght">
            <el-input v-model="form.accountLenght" placeholder="请输入生成位数" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="租户" prop="tenants">
            <el-select v-model="form.tenants" filterable placeholder="选择租户" @change="tenantChange">
              <el-option v-for="(item, index) in tenantList" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="识别码" prop="identifier">
            <!-- <el-input v-model="form.identifier" placeholder="请输入识别码" clearable /> -->
            <span>
              {{ form.tenants }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回调地址" v-show="isShow">
            <el-input v-model="form.redirectUri" :disabled="isShow" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="扩展参数" class="kuozhan">
            <el-input type="textarea" v-model="form.extParam" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { addThirdConfig, updateThirdConfig } from "@/api/system/thirdLogin";
import { getTenantDic } from '@/api/tenant/tenant'
const { proxy } = getCurrentInstance();
const { third_login_type } = proxy.useDict("third_login_type");
const title = ref("");
const visible = ref(false);
const isShow = ref(false)
const tenantList = ref({});
const tenant = ref("")
const data = reactive({
  form: {
    accountPrefix: undefined,
    accountLenght: undefined
  },
  queryParams: {},
  host: "",
  rules: {
    name: [{ required: true, message: "请输入配置名称!", trigger: "blur" }],
    type: [{ required: true, message: "请选择第三方类型!", trigger: "blur" }],
    clientId: [{ required: true, message: "请输入appId!", trigger: "blur" }],
    clientSecret: [
      { required: true, message: "请输入客戶端密钥!", trigger: "blur" },
    ],
    accountPrefix: [
      { required: true, message: "请输入账号生成前缀!", trigger: "blur" },
    ],
    accountLenght: [
      { required: true, message: "请输入账号生成位数!", trigger: "blur" },
    ],
    tenants: [{ required: true, message: "租户不能为空", trigger: "blur" }],
    identifier: [{ required: true, message: "识别码不能为空", trigger: "blur" }]
  },
});

const { queryParams, form, rules, host } = toRefs(data);
host.value = window.location.protocol + "//" + window.location.host;
console.log("host===", host.value);
/** 重置操作表单 */
function reset() {
  form.value = {
  };
  proxy.resetForm("ruleFormRef");
}
// 显示弹框
function add() {
  reset();
  visible.value = true;
  title.value = "新增第三方登录";
  isShow.value = false

}
const edit = (row) => {
  console.log('修改', row)
  reset();
  visible.value = true;
  title.value = "修改第三方登录";
  form.value = Object.assign({}, row);
  isShow.value = true
  form.value.tenants = row.identifier
}
getTenantDic(tenant.value).then(res => {
  console.log('租户字典', res)
  if (res.code == 200) {
    tenantList.value = res.data
  }

})
function tenantChange(val) {
  console.log('租户id', val)
  form.value.tenantId = val;
  form.value.identifier = form.value.tenantId
}
/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
};
function submitForm() {
  proxy.$refs['ruleFormRef'].validate(valid => {
    if (valid) {
      form.value.redirectUri = host.value + '/' + form.value.type + '/' + form.value.identifier
      if (form.value.id != undefined) {

        updateThirdConfig(form.value).then(res => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          proxy.$emit('refresh');
        })
      } else {
        addThirdConfig(form.value).then(res => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          proxy.$emit('refresh')
        })
      }

    } else {
      proxy.$modal.msgError("提交失败！");
      return false;
    }
  })
}
defineExpose({
  add, edit
});
</script>
